<div ng-controller="ReaderExploration" ng-style="getStyle()">
  <div class="oppia-feedback-button" ng-click="showFeedbackModal()">
    <center>
      <br><br><br>Feedback
    </center>
  </div>

  <script type="text/ng-template" id="modals/readerFeedback">
    <div class="modal-header">
      <h3>Give Feedback</h3>
    </div>
  
    <div class="modal-body">
      <h4>Give feedback to the exploration editors</h4>
      <!-- TODO(sfederwisch): make this true<i> They will be given the exploration history already.</i><br />-->
      <em>
        <p>
          Note: This form is meant for exploration-specific feedback. This feedback will be sent to the exploration's editors, who will use your feedback to improve the exploration.
        </p>
        <p>
          To give general feedback about Oppia, please consider using our <a href="https://code.google.com/p/oppia/issues/list"> bug tracker</a> or <a href="https://groups.google.com/forum/?fromgroups#!forum/oppia">Google Group</a>. Thanks in advance!
        </p>
      </em>
      <textarea ng-model="feedback" rows="6" cols="200" placeholder="Please write your feedback or suggestions for the exploration editors here."></textarea>
    </div>
  
    <div class="modal-footer">
      <button class="btn" ng-click="submit(feedback)">Submit</button>
      <button class="btn" ng-click="cancel()">Cancel</button>
    </div>
  </script>

  <script type="text/ng-template" id="modals/readerFeedbackConfirmation">
    <div class="modal-header">
      <h3>Thank you for giving feedback</h3>
    </div>
  
    <div class="modal-body">
      <p>
        Your feedback has been successfully submitted, and the exploration creator will see it the next time he/she visits the exploration creation dashboard.
      </p>
      <p>
        Thank you for helping to improve this exploration!
      </p>
    </div>
  
    <div class="modal-footer">
      <button class="btn" ng-click="cancel()">Close</button>
    </div>
  </script>

  <div class="oppia-content">
    <div class="oppia-exploration-header">
      <h3><[title]></h3>
    </div>
    <div class="oppia-iframe-container oppia-exploration">
      <a href="" ng-click="initializePage()" class="pull-right">
        Clear history and restart
      </a>

      <br>
      <br>

      <div ng-repeat="response in responseLog track by $index">
        <div id="<[{true: 'response', false: 'conversation'}[$last && !finished]]>" class="<[{true: 'oppia-response', false: 'oppia-conversation-log'}[$last && !finished]]>">
          <div angular-html-bind="response">
          </div>
        </div>
      </div>

      <br>

      <div ng-show="finished" class="oppia-response">
        Congratulations, you've finished this exploration!
        Would you like to <a ng-click="initializePage()" href="#" onclick="return false;">play again?</a>
      </div>

      <div ng-hide="finished">
        <!-- This iframe must always be contained within a div in
        which it is the only element. For more information, please
        see the ReaderExploration.js file. -->

        <!-- If the exploration is iframed, send data to the parent about the
        iframe height.-->
        <script>
          window.onIframeLoad = function() {
            if (window.onBodyLoad) {
              window.onBodyLoad();
            }
          };
        </script>

        <iframe id="inputTemplate" width="100%" seamless="seamless"
                frameborder="0" onload="onIframeLoad()"></iframe>
      </div>
    </div>
  </div>

</div>
